import { message } from "@/utils/message";

// 需是hooks写法（函数中有return），避免失去响应性
export function useColumns(
  handleViewCallback?: (row: any) => void,
  handleEditCallback?: (row: any) => void
) {
  const columns: TableColumnList = [
    {
      label: "所在展馆",
      prop: "pavilion",
      width: 120
    },
    {
      label: "展位类型",
      prop: "booth_type",
      width: 120
    },
    {
      label: "展位面积",
      prop: "booth_area",
      width: 120,
      cellRenderer: ({ row }) => <span>{row.booth_area} m²</span>
    },
    {
      label: "展商名称中文",
      prop: "company_name_cn",
      width: 200,
      cellRenderer: ({ row }) => (
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          {{
            default: () => (
              <>
                <div>公司名称: {row.company_name_cn}</div>
                <div>地址: {row.addres}</div>
              </>
            ),
            reference: () => <el-tag>{row.company_name_cn}</el-tag>
          }}
        </el-popover>
      )
    },
    {
      label: "展商名称英文",
      prop: "company_name_en",
      width: 200,
      cellRenderer: ({ row }) => (
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          {{
            default: () => (
              <>
                <div>Company Name: {row.company_name_en}</div>
                <div>Address: {row.addres}</div>
              </>
            ),
            reference: () => <el-tag type="info">{row.company_name_en}</el-tag>
          }}
        </el-popover>
      )
    },
    {
      label: "产品类别",
      prop: "product_category",
      width: 150
    },
    {
      label: "展商负责人",
      prop: "charge_person",
      width: 120
    },
    {
      label: "负责人手机",
      prop: "charge_phone",
      width: 140
    },
    {
      label: "负责人电子邮件",
      prop: "charge_email",
      width: 200
    },
    {
      label: "审批状态",
      prop: "status",
      width: 120,
      cellRenderer: ({ row }) => {
        let statusText = "";
        let statusType = "";

        switch (row.status) {
          case 0:
            statusText = "审核中";
            statusType = "warning";
            break;
          case 1:
            statusText = "已通过";
            statusType = "success";
            break;
          case 2:
            statusText = "未通过";
            statusType = "danger";
            break;
          case 3:
            statusText = "待提交";
            statusType = "warning";
            break;
          default:
            statusText = "未知";
            statusType = "info";
        }

        return <el-tag type={statusType}>{statusText}</el-tag>;
      }
    },
    {
      label: "操作",
      fixed: "right",
      width: 150,
      cellRenderer: ({ row }) => (
        <>
          <el-button size="small" onClick={() => handleView(row)}>
            查看
          </el-button>
          <el-button size="small" onClick={() => handleEdit(row)}>
            修改
          </el-button>
        </>
      )
    }
  ];

  const handleView = row => {
    if (handleViewCallback) {
      handleViewCallback(row);
    } else {
      message(`您查看了第 ${row.id} 行，数据为：${JSON.stringify(row)}`, {
        type: "success"
      });
    }
  };

  const handleEdit = row => {
    console.log("点击修改按钮，当前状态:", row.status);

    // 根据状态进行拦截与提示
    if (row.status === 0) {
      message("企业资料正在审核中，不能修改", { type: "warning" });
      return;
    }
    if (row.status === 1) {
      message("企业资料已通过，不能修改", { type: "warning" });
      return;
    }

    console.log("状态检查通过，调用修改回调");
    if (handleEditCallback) {
      handleEditCallback(row);
    } else {
      message(`您修改了第 ${row.id} 行，数据为：${JSON.stringify(row)}`, {
        type: "success"
      });
    }
  };

  return {
    columns
  };
}
